<template>
  <div class="container">
    <el-card>
      <el-row class="addQuestion">
        <el-button type="success" @click="$router.push('new')"
          >新增试题</el-button
        >
      </el-row>
      <question-select
        class="question-select"
        @onSearch="onSearchQuestion"
        @reLoad="reload"
      ></question-select>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
          <el-alert :title="'数据一共' + total + '条'" type="info" show-icon>
          </el-alert>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="0"
          ><el-alert :title="'数据一共' + total + '条'" type="info" show-icon>
          </el-alert>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="1"
          ><el-alert :title="'数据一共' + total + '条'" type="info" show-icon>
          </el-alert>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2">
          <el-alert :title="'数据一共' + total + '条'" type="info" show-icon>
          </el-alert
        ></el-tab-pane>
      </el-tabs>
      <el-table :data="choiceQuestion">
        <el-table-column
          label="试题编号"
          prop="number"
          width="300px"
        ></el-table-column>
        <el-table-column
          label="学科"
          prop="subject"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="目录"
          prop="catalog"
          width="100px"
        ></el-table-column>
        <el-table-column label="题型" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="300px">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="导入时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
          width="100px"
        ></el-table-column>
        <el-table-column label="审核状态" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState === 0">待审核</span>
            <span v-else-if="scope.row.chkState === 1">已审核</span>
            <span v-else>已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
          prop="chkRemarks"
          width="300px"
        ></el-table-column>
        <el-table-column
          label="审核人"
          prop="chkUser"
          width="100px"
        ></el-table-column>
        <el-table-column label="发布状态" width="100px">
          <template slot-scope="scope">
            <span
              v-if="scope.row.publishState === 1 && scope.row.chkState === 1"
              >已发布</span
            >
            <span v-else-if="scope.row.publishState === 0">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
          width="240px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showPreview(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.chkState !== 0"
              @click="showCheckDialog(scope.row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.publishState === 1"
              @click="onEdit(scope.row.id)"
              >修改</el-button
            >
            <el-button type="text" @click="onPublish(scope.row)">{{
              scope.row.publishState === 1 ? '下架' : '上架'
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.publishState === 1"
              @click="onDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="50%"
    >
      <div class="preview-body">
        <el-row class="pre-item">
          <el-col :span="6">
            <span>【题型】：</span>
            <span v-if="preview.questionType === '1'">单选题</span>
            <span v-else-if="preview.questionType === '2'">多选题</span>
            <span v-else>简答题</span>
          </el-col>
          <el-col :span="6"
            ><span>【编号】：{{ preview.id }}</span></el-col
          >
          <el-col :span="6"
            ><span
              >【难度】：{{
                preview.difficulty === '1'
                  ? '简单'
                  : preview.difficulty === '2'
                  ? '一般'
                  : '困难'
              }}</span
            ></el-col
          >
          <el-col :span="6"
            ><span>【标签】：{{ preview.tags }}</span></el-col
          >
        </el-row>
        <el-row class="pre-item">
          <el-col :span="6"
            ><span>【学科】：{{ preview.subject }}</span></el-col
          >
          <el-col :span="6"
            ><span>【目录】：{{ preview.catalog }}</span></el-col
          >
          <el-col :span="6"
            ><span>【方向】：{{ preview.direction }}</span></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row> 【题干】 </el-row>
        <el-row
          ><div v-html="preview.question" style="color: blue"></div
        ></el-row>
        <el-row class="">
          <!-- 单选 -->
          <el-radio-group
            v-if="preview.questionType === '1'"
            v-model="radioValue"
          >
            <el-radio v-for="item in Option" :key="item.id" :label="item.id">{{
              item.title
            }}</el-radio>
          </el-radio-group>
          <!-- 多选 -->
          <el-checkbox-group
            v-model="optionValue"
            v-else-if="preview.questionType === '2'"
          >
            <el-checkbox
              :label="item.title"
              v-for="item in Option"
              :key="item.id"
            ></el-checkbox>
          </el-checkbox-group>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <span>【参考答案】：</span
          ><el-button type="danger" @click="onShowVideo"
            >视频答案预览</el-button
          >
        </el-row>
        <video
          v-if="showVideo"
          :src="preview.videoURL"
          controls
          width="500px"
          height="300px"
        ></video>
        <el-divider></el-divider>
        <el-row>
          <span>【答案解析】：</span> <span v-html="preview.answer"></span>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <span>【题目备注】：{{ preview.remarks }}</span>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewDialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="checkDialogVisible"
      width="30%"
      @closed="closeCheckDialog"
    >
      <el-radio v-model="checkRadio" :label="1">通过</el-radio>
      <el-radio v-model="checkRadio" :label="2">拒绝</el-radio>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="textarea"
        class="check-remark"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkDialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QuestionSelect from '../components/question-select'
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  remove,
} from '@/api/hmmm/questions'
export default {
  name: 'QuestionChoice',
  components: {
    QuestionSelect,
  },
  data() {
    return {
      activeName: 'all',
      queryInfo: {
        page: 1, //当前页码
        pagesize: 10, //页尺寸
        chkState: null,
      },
      choiceQuestion: [], //精品题库列表
      total: 0, //总记录条数
      previewDialogVisible: false, //题目预览对话框显示隐藏
      preview: {}, //预览数据
      Option: [],
      radioValue: null,
      optionValue: [],
      radioLabel: '',
      showVideo: false, //是否显示视频
      checkDialogVisible: false, //审核对话框显示隐藏
      checkRadio: 1,
      checkId: 0, //审核题目id
      textarea: '',
    }
  },
  methods: {
    //获取精品题库列表
    async getChoiceQuestion() {
      try {
        const { data: res } = await choice(this.queryInfo)
        this.choiceQuestion = res.items
        this.total = res.counts
      } catch (error) {
        this.$message.error('获取数据列表失败')
      }
    },
    handleClick() {
      if (this.activeName === 'all') this.queryInfo.chkState = null
      else this.queryInfo.chkState = this.activeName
      this.getChoiceQuestion()
    },
    onSearchQuestion(formdata) {
      this.queryInfo = Object.assign(formdata, this.queryInfo)
      this.queryInfo.page = 1
      this.getChoiceQuestion()
    },
    reload() {
      //重新加载数据
      this.queryInfo.page = 1
      this.getChoiceQuestion()
    },
    //页尺寸发生变化
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getChoiceQuestion()
    },
    //翻页
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getChoiceQuestion()
    },
    //预览题目
    showPreview(preItem) {
      this.previewDialogVisible = true
      this.preview = preItem
      this.getRadioOption(this.preview.id)
    },
    async getRadioOption(id) {
      try {
        const { data: res } = await detail({ id })
        this.Option = res.options
        if (res.questionType === '1') {
          //单选题
          let rightOption = this.Option.find((item) => {
            return item.isRight === 1
          })
          this.radioValue = rightOption.id
        } else if (res.questionType === '2') {
          //多选题
          this.Option.forEach((item) => {
            if (item.isRight === 1) this.optionValue.push(item.title)
          })
        } else {
          return
        }
        // console.log(res)
      } catch (error) {
        // console.log(error)
        this.$message.error('题目详情失败')
      }
    },
    onShowVideo() {
      this.showVideo = true
    },
    //审核题目
    showCheckDialog(id) {
      this.checkId = id
      this.checkDialogVisible = true
    },
    //发起审核请求
    async postCheck() {
      if (this.textarea === '') return this.$message.warning('请输入审核意见')
      try {
        await choiceCheck({
          id: this.checkId,
          chkState: this.checkRadio,
          chkRemarks: this.textarea,
        })
        this.$message.success('审核成功')
        this.getChoiceQuestion()
        this.checkDialogVisible = false
      } catch (error) {
        this.$message.error('审核失败')
      }
    },
    //关闭审核对话框
    closeCheckDialog() {
      this.textarea = ''
      ;(this.checkId = 0), (this.checkRadio = 1)
    },
    //修改试题
    onEdit(id) {
      console.log(id)
      this.$router.push({
        path: 'new',
        query: {
          id,
        },
      })
    },
    //上架or下架
    onPublish(item) {
      const tips = item.publishState === 1 ? '下架' : '上架'
      this.$confirm('您确定' + tips + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            await choicePublish({
              id: item.id,
              publishState: item.publishState === 1 ? 0 : 1,
            })
            this.getChoiceQuestion()
            this.$message({
              type: 'success',
              message: tips + '成功!',
            })
          } catch (error) {
            return this.$message.error(tips + '失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + tips,
          })
        })
    },
    //精品题库题目移出
    onDelete(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            await remove({ id })
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getChoiceQuestion()
          } catch (error) {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    this.getChoiceQuestion()
  },
}
</script>

<style scoped lang='less'>
.question-select {
  margin: 20px auto;
}
.el-alert {
  margin-bottom: 15px;
}
.addQuestion,
.footer {
  display: flex;
  justify-content: flex-end;
}
.pre-item {
  margin-top: 20px;
}
.el-radio-group,
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: space-between;
}
video {
  margin: 10px;
  width: 100%;
}
.check-remark {
  margin: 20px 0;
}
</style>